import styled from "@emotion/styled";
import React from "react";
const Button = styled.button`
    height:40px;
    background:red;
    color:${props => props.ftColor || 'black'}
`
// const Container = styled.div(props=>({
//     width: '100%',
//     height: 100,
//     background:props.bgColor||'red',
//     color: 'yellow'
// }))
const Container = styled.div({
    width: '100%',
    height: 100,
    color: 'yellow'
}, props => ({
    background: props.bgColor || 'red',
}))

export default function CssComponentPri() {
    return (
        <>
            <Container bgColor='blue'>
                样式化组件根据 props 属性覆盖样式-对象写法
                <Button ftColor='blue'> 样式化组件根据 props 属性覆盖样式-字符串写法</Button>
            </Container>
        </>
    )
}